<template>
	<view id="cateContainer">
		<!-- 搜索框 -->
		<search @search="gotoSearch"></search>
		<view id="cateSwiperContainer">
			<!-- 左边滚动条-一级分类 -->
			<scroll-view class="leftScroll" scroll-y="true" :style="{height:wh+'px'}">
				<view @click="getCateData(index)" v-for="(item,index) in cateList" :key="item.cat_id" :class="['leftScrollItem', index === active?'active' : '']">{{item.cat_name}}</view>
			</scroll-view>
			<!-- 右边滚动条 -->
			<!-- 二级分类 -->
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="rightSrcoll" :style="{height:wh+'px'}">
				<view v-for="(item2,index2) in cateLeve2" :key="item2.cat_id" class="rightScrollItem">
					<view class="rightItemTitle">/{{item2.cat_name}}/</view>
					<!-- 三级分类 -->
					<view class="itemContainer">
						<view @click="switchCateItem(item3)" v-for="(item3,index3) in item2.children" :key="item3.cat_id" class="item">
							<image></image>
							<!-- <image :src="item3.cat_icon"></image> -->
							<text>{{item3.cat_name}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 窗口的可用高度 = 屏幕高度 - navigationBar高度 - tabar高度
				wh:0,
				// 一级分类
				cateList:[],
				// 二级分类
				cateLeve2:[],
				active:0,
				scrollTop: 0
			};
		},
		onLoad(){
			// 获取当前系统的信息
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight - 50
			this.getCateList()
		},
		methods:{
			// 获取cateList
			async getCateList(){
				const {data:res} = await uni.$http.get('/api/public/v1/categories')
				if(res.meta.status == 200){
					this.cateList = res.message
					this.cateLeve2 = this.cateList[0].children
				}else{
					return uni.$showMsg()
				}
			},
			// cate点击事件
			getCateData(index){
				this.active = index
				this.cateLeve2 = this.cateList[index].children
				this.scrollTop = this.scrollTop === 0 ? 1 : 0
			},
			// cateItem点击事件
			switchCateItem(item){
				uni.navigateTo({
					url:"/subpkg/goods_list/goods_list?itemId="+item.cat_id
				})
			},
			gotoSearch(){
				uni.navigateTo({
					url:"/subpkg/search/search"
				})
			}
		}
	}
</script>

<style lang="scss">
#cateSwiperContainer{
	display: flex;
	.leftScroll{
		text-align: center;
		width: 240rpx;
		.leftScrollItem{
			line-height: 60px;
			background-color: #f7f7f7;
			font-size: 12px;
			&.active{
				background-color: #ffffff;
				position: relative;
				&::before{
					content: '';
					display: block;
					width: 6rpx;
					height: 60rpx;
					background-color: #c00000;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}
	.rightSrcoll{
		text-align: center;
		.rightScrollItem{
			.rightItemTitle{
				font-size: 24rpx;
				font-weight: bold;
				padding: 30rpx 0;
			}
			.itemContainer{
				display: flex;
				flex-wrap: wrap;
				.item{
					width: 33.33%;
					display: flex;
					flex-direction: column;
					align-items: center;
					image{
						width: 120rpx;
						height: 120rpx;
					}
					text{
						font-size: 24rpx;
					}
				}
			}
		}
	}
}

</style>
